March 25, 2024 by Konsta Alajärvi | Comments

​2024年3月25日 Konsta Alajärvi |评论

The Coffee Machine is a popular example that was initially made for embedded devices with a pre-defined screen size. In this blog post, we will share what was done to modernize the example and what improvements were made to ensure that it runs seamlessly on various devices on Android, iOS or other platforms supported by the Qt. 

咖啡机是一个流行的例子，最初是为具有预定义屏幕大小的嵌入式设备制作的。在这篇博客文章中，我们将分享为使示例现代化所做的工作，以及为确保它在Android、iOS或Qt支持的其他平台上的各种设备上无缝运行所做的改进。

With any application targeted on mobile devices, it is important that the application is scaling dynamically to various screen sizes.  

对于任何以移动设备为目标的应用程序，应用程序动态扩展到各种屏幕大小是很重要的。

With the re-designed Coffee Machine example scalability to any sized display is ensured by first setting the width and height properties of the root object ApplicationWindow as follows: 

​在重新设计的咖啡机示例中，通过首先设置 根对象ApplicationWindow的宽度和高度属性如下：

This ensures that the ApplicationWindow is set to fill up the target device display, excluding window manager reserved areas such as taskbars and system menus.  Page components lower in the object tree can then fill their parent, the ApplicationWindow, without worrying about size anymore.

这确保ApplicationWindow设置为填充目标设备显示，不包括任务栏和系统菜单等窗口管理器保留区域。然后，对象树中较低的页面组件可以填充其父级ApplicationWindow，而不再担心大小问题。

Responsiveness in this context mostly concerns the mobile device orientation and changes to the example UI resulting from those changes.  The new design achieves this responsiveness through state machines that check whether the ApplicationWindow’s width is greater than its height or vice versa and then changing the UI components accordingly.  

在此上下文中的响应性主要涉及移动设备方向以及由这些改变引起的对示例UI的改变。新设计通过状态机来实现这种响应，状态机检查ApplicationWindow的宽度是否大于其高度，反之亦然，然后相应地更改UI组件。

A modern new UI design for the example is thanks to the Qt Design Team, who created all the new UI elements and the separate designs for portrait and landscape modes. This was all done with Figma, where code for layouts, styles, and colors are automatically generated for developers to extract. Unfortunately, this was not that useful in this case as the generated code for layouts and components does not consider the application’s scalability and that’s why copying the code from Figma to Qt application was not possible.

这个例子的现代新UI设计要归功于Qt设计团队，他们创建了所有新的UI元素以及肖像和风景模式的单独设计。这一切都是用Figma完成的，在Figma中，布局、样式和颜色的代码会自动生成，供开发人员提取。不幸的是，在这种情况下，这并没有那么有用，因为为布局和组件生成的代码没有考虑到应用程序的可伸缩性，这就是为什么无法将代码从Figma复制到Qt应用程序的原因。

Either way, we were able to benefit from designer-developer co-operation in Figma by copying the overall look of the design, page layouts, images, colors, and general component dimensions from the Figma design in to Coffee Machine example source code, and using the commenting feature that Figma offers, to share our thoughts and ideas on the same platform.

无论哪种方式，我们都能够从Figma的设计者-开发者合作中受益，将Figma设计的整体外观、页面布局、图像、颜色和通用组件尺寸复制到Coffee Machine示例源代码中，并使用Figma提供的评论功能，在同一平台上分享我们的想法和想法。

The older version of the Coffee Machine example UI looked like this upon launch:

旧版本的Coffee Machine示例UI在发布时是这样的：

Note that in the older version there was no scaling handling.

请注意，在旧版本中没有缩放处理。

The new version has dedicated layout designs for both portrait and landscape mode. Look of the new version upon launch:

新版本有专门的布局设计为纵向和横向模式。新版本发布后的外观：

These changes become more prominent later on, for example, on the coffee selection page:

这些变化稍后会变得更加突出，例如在咖啡选择页面上：

Here we can see the different configurations in portrait and landscape modes.

在这里，我们可以看到纵向和横向模式下的不同配置。

Squish based tests were created for the Coffee Machine example to ensure its quality using automated  testing. Each Qt release are checked to ensure that all UI elements of the Coffee Machine example show up correctly, none of the elements will overflow the display with any of the various mobile device display sizes, and everything works as intended. The same tests can be executed on platforms other than Android, such as iOS or Embedded Linux for example with Squish for Qt.

以Squish为基础的测试是为咖啡机的例子创建的，以确保使用自动化测试的质量。每个Qt版本都经过检查，以确保Coffee Machine示例的所有UI元素都正确显示，没有任何元素会溢出各种移动设备显示尺寸的显示器，并且一切正常。同样的测试可以在Android以外的平台上执行，如iOS或嵌入式Linux，例如Squish for Qt。